<template>
	<view class="pages-card bgc-w">
		<view class="card-top row-box pb-20">
			<view class="flex align-items-center">
				<image src="/static/images/logo.png" mode="scaleToFill" style="width: 36rpx;height: 36rpx;"></image>
				<text class="fs-lg fc-0 fw-6 ml-10">
					配送时间:2025-5-22 11:13:03
				</text>
			</view>
			<view>
				配送状态
			</view>
		</view>
		<view class="card-center">
			<view class="row-box pt-10 pb-10 ">
				<view class="title mr-20">
					门店导购员
				</view>
				<view class="fc-0">
					姓名 13312341234
				</view>
			</view>
			<view class="row-box pt-10 pb-10 ">
				<view class="title mr-20">
					配送人员
				</view>
				<view class="fc-0">
					姓名 13312341234
				</view>
			</view>
			<view class="row-box pt-10 pb-10 ">
				<view class="title mr-20">
					配送单号
				</view>
				<view class="fc-0">
					2025030419871212
				</view>
			</view>
			<view class="row-box pt-10 pb-10 ">
				<view class="title mr-20">
					配送地址
				</view>
				<view class="fc-0">
					2025030419871212
				</view>
			</view>

		</view>
		<view class="card-bottom pt-20 row-box">
			<view class="">
				<view class="fs-sm">
					<text class="fs-sm">共 <text class="fc-warn">188</text>个顾客 </text>
					<text class="fs-sm"> <text class="fc-warn">188</text>个订单 </text>
				</view>
				<view class="">
					<text class="fs-sm"><text class="fc-warn">16</text>种 </text>
					<text class="fs-sm">共 <text class="fc-warn">1188</text>个产品 </text>
				</view>
			</view>
			<view class="flex align-items-center">
				<view class="btn-info-sm ml-10" @click="details">
					查看详情
				</view>
				<view class="btn-info-green-sm ml-10" @click="confirm">
					确认收货
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			details() {
				this.$emit('details')
			},
			confirm() {
				this.$emit('confirm')
			}
		},

	}
</script>

<style lang="scss" scoped>
	.pages-card {
		width: 690rpx;
		position: relative;
		margin: 0 auto 20rpx;
	}

	.title {
		width: 140rpx;
		// text-align: justify;
		// text-align-last: justify;

	}

	.card-top,
	.card-center {
		border-bottom: 1px solid #ededee;
	}

	.btn-info {
		width: 144rpx;
		line-height: 56rpx;
		font-size: 28rpx;
		background-color: #FFF;
		border: 1rpx solid #666;
		color: #666;
	}

	.btn-info-green {
		width: 144rpx;
		line-height: 56rpx;
		font-size: 28rpx;
		background-color: #FFF;
		border: 1rpx solid #00A191;
		color: #00A191;
	}
</style>